<template>
    <div class="app-container">
        <div class="left-nav">
            <ul>
                <li v-for="(item,index) in list" :key="index" :class="{active:item.path == $route.path}"> <span class="icon"></span>
                    <router-link :to="item.path">{{item.name}}</router-link>
                    <span class="hr"></span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "全部榜单",
          path: "/ranklist/all_rank"
        },
        {
          name: "每月阅读榜",
          path: "/ranklist/every_rank"
        },
        {
          name: "好书推荐榜",
          path: "/ranklist/good_rank"
        },
        {
          name: "图书收藏榜",
          path: "/ranklist/collection_rank"
        }
      ],
      active: 0
    };
  },
  components: {},
  methods: {
    changeActive(index) {
      
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
    .left-nav ul li.active{
      border-left: 4px solid #e93926;
    }
    .left-nav ul li .icon{
      background: url("/static/images_dz/rank/rank-icon.png") no-repeat;
    }
    .left-nav ul li.active a{
      color: #e93926;
    }
  
}
.left-nav {
  ul {
    margin: 0px;
    padding: 0px;
    li:last-child .hr{
      display: none;
    }
    li {
      position: relative;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      margin: 20px 0;
      text-align: center;
      padding-left: 36px;
      font-size: 18px;
      display: flex;
      align-items: center;
      border-left: 4px solid transparent;
      .hr{
        position: absolute;
        display: block;
        bottom: -10px;
        left: 36px;
        height: 1px;
        width: calc(100% - 72px);
        background: #eeeeee;
      }
      a {
        text-decoration: none;
        color: #000;
      }
      .icon {
        width: 30px;
        height: 30px;
        overflow: hidden;
        background: url("/static/images/rank/rank-icon.png") no-repeat;
        margin-right: 30px;
      }
    }
    li:nth-child(2) {
      .icon {
        background-position-x: -30px;
      }
    }
    li:nth-child(3) {
      .icon {
        background-position-x: -60px;
      }
    }
    li:nth-child(4) {
      .icon {
        background-position-x: -90px;
      }
    }
    li.active {
      border-left: 4px solid #15c798;
      //   background: #eefff8;
      a {
        color: #15c798;
      }
      .icon {
        background-position-y: -30px;
      }
    }
  }
}
</style>


